<template>
  <div class="brandWrapper" :style="{maxWidth: `${maxWidth}px`}">
    <el-select v-model="value" remote :remote-method="remoteMethod" :loading="loading" filterable :disabled="!editable" ref="select" placeholder="">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts">
import {Vue, Emit, Watch, Component, Prop} from 'vue-property-decorator'
import masterModal from "../../../../../api/module/masterModal";
import {BrandResponseDto, CommonPageResponse} from "../../../../../utils/types";
import {fieldProps} from "../../MainDisplay/InfoPreview";
import {OptionType} from "../CommodityClassify/type";

@Component({
  model:{
    prop: "propValue",
    event: "update"
  }
})
export default class ManageCategory extends Vue {
  value:string = ""
  loading:boolean = false
  options:{label:string, value:string}[] = [] as any
  staticOption:{label:string, value:string}[] = [] as any
  maxWidth:number = 220;
  @Prop({default:{}})item!:fieldProps
  @Prop({default:true})editable!:boolean
  async remoteMethod(query:string){
    if(query !== ''){
      this.loading = true
      const res = await masterModal.getParamsData({strList: ["management_category", "physical_form"]})
      this.loading =false
      if (res.data) {
        const manageOptions: OptionType[] = res.data.filter(item => item.paramType === 'management_category').map(j => ({
          label: j.name,
          value: j.code
        }))
        this.options = manageOptions
        const data: OptionType[] = this.options.concat(this.staticOption)
        const uniqueByValue: OptionType[] = Array.from(new Map(data.map(item => [item.value, item])).values());
        this.options = uniqueByValue
      }
    }else{
      this.options = []
    }
  }

  @Emit("update")
  valueChangeUpdate(value:string){
    return value
  }
  mounted(){
    if (window.innerWidth < 1200){
      this.maxWidth = 100
    }else if(window.innerWidth > 1200 && window.innerWidth < 1440){
      this.maxWidth = 120
    }else if(window.innerWidth > 1440 && window.innerWidth < 1680){
      this.maxWidth = 180
    }else if(window.innerWidth > 1680 && window.innerWidth < 1920){
      this.maxWidth = 220
    }else if(window.innerWidth > 1920){
      this.maxWidth = 240
    }
    window.addEventListener("resize", ()=>{
      if (window.innerWidth < 1200){
        this.maxWidth = 100
      }else if(window.innerWidth > 1200 && window.innerWidth < 1440){
        this.maxWidth = 120
      }else if(window.innerWidth > 1440 && window.innerWidth < 1680){
        this.maxWidth = 200
      }else if(window.innerWidth > 1680 && window.innerWidth < 1920){
        this.maxWidth = 220
      }else if(window.innerWidth > 1920){
        this.maxWidth = 240
      }
    })
  }
  @Emit("change")
  changeUpdate(value:string){
    return value
  }

  @Watch("value", {immediate: true})
  onValueChange(newValue: string) {
    this.valueChangeUpdate(newValue)
    const labelValue = <string>this.options.find(item => item.value === newValue)?.label;
    if(labelValue){
      this.changeUpdate(labelValue)
    }
  }

  @Watch("item", {immediate: true, deep: true})
  onItemChange(newValue:fieldProps) {
    this.staticOption = [{label: (newValue as any)[newValue.labelKey],value: newValue.value}]
    this.options = this.staticOption.filter(i => !!i.value)
    this.value = newValue.value
  }

  focus(){
    //@ts-ignore
    this.$refs.select.focus()
  }
}
</script>

<style scoped lang="scss">
.brandWrapper{
  ::v-deep .el-input__inner {
    height: 32px;
    border: none;
    padding: 0
  }
  ::v-deep .el-input.is-disabled .el-input__inner{
    background: unset !important;
    color: #606266
  }
}
</style>